<template>
  <head>
  <meta charset="UTF-8">
  <!-- <title>My Vue App</title>
  <link rel="stylesheet" href="styles.css"> -->
</head>
    <div class="hello">
    </div>
      <div class="home-container">
        <el-row :span="24" >
          <el-col :span="2">
          </el-col>
          <el-col :span="8">
            <div>
              <el-carousel :interval="5000" :height="carouselHeight">
              <el-carousel-item style="text-align: center;" v-for="(item, index) in spotpic" :key="index">
                <img :src="item.src1" alt="spot image" style="height:450px;width: 1250px;max-height: 100%; max-width: 100%" />
                <div class="carousel-caption">
                  <h3>{{ item.comment }}</h3>
                </div>
              </el-carousel-item>
            </el-carousel>
            </div>

          </el-col>
          <el-col :span="2">

          </el-col>
          <el-col :span="12">
              <div class="clubname" style="display: flex; align-items: center">
                <div style="margin-left: 15px;text-align: left;">
                  <h3>{{club.Cname}}</h3> 
                  </div>
                  <div class="click_btn" style="margin-left: 5px;" @click="show()">申请加入</div>
                 
              </div>
                  <el-dialog v-model="dialogVisible" class="custom-dialog">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                      <el-row>
                        <el-col :span="12">
                          <el-form-item label="姓名：" prop="name">
                           {{user.Uname}}
                          </el-form-item>
                          <el-form-item label="学号：" prop="user_id">
                            {{ user.Uid }}
                          </el-form-item>
                          <el-form-item label="学院：" prop="college">
                            {{ user.College }}
                          </el-form-item> 
                          
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="申请社团：" prop="club">
                            <!-- <el-input v-model="ruleForm.club"></el-input> -->
                             {{ club.Cname }}
                          </el-form-item>
                          <el-form-item label="社团类别：" prop="clubtype">
                            <!-- <el-input v-model="ruleForm.clubtype"></el-input> -->
                            {{ getTypeText(club.Type) }}
                          </el-form-item>
                          
                      </el-col>

                      </el-row>
                      <el-form-item label="社团申请表">
                        <!-- <span class="attachment-name">社团申请表.docx</span> -->
                          <!-- <a href="#" download>下载文件</a> -->
                          <a href="/path/to/your/file" class="download-link">《社团申请表》</a>
                      </el-form-item>
                      <!-- 不知道如何绑定上传上来的申请表文件 -->
                      <el-form-item label="上传申请表" prop="joinFile">
                        <el-upload
                        class="upload-demo"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple
                      >
                      <el-icon style="font-size: 34px;">
                        <Upload />
                      </el-icon>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <template v-slot:tip>
                          <div class="el-upload__tip">注：文件不能超过500kb</div>
                        </template>
                      </el-upload>

                      </el-form-item>
                      <el-form-item label="申请理由:" prop="joinReason">
                            <el-input type="textarea" v-model="this.joinReason"></el-input>
                      </el-form-item>
                      <el-button type="primary" @click="JoinClub()">确定申请</el-button>
                    </el-form>
                  </el-dialog>

              <!-- <div style="width: 150px; height: 30px"> -->
                <div class="tag-group">
              
              <!-- 社团等级：校级/所属学院 -->
                <el-tag type="primary" effect="plain" style="margin-right: 5px;">
                {{ club.Unit }}
                </el-tag>
                <!-- 社团类别 -->
                <el-tag type="warning" effect="plain" style="margin-right: 5px;">
                {{ getTypeText(club.Type) }}
                </el-tag>
                <!-- 社团地址 -->
                <el-tag type="success" effect="plain">
                {{ getAddressText(club.Address)}}
                </el-tag>
                </div>
            <!-- </div> -->
                <!-- 社团基本信息 -->
                <div class="clubinfo">
                  <p>社团宗旨：{{ club.Aim }}</p>
                  <p>社团介绍：{{ club.Introduction }}</p>
                  <p>创办时间：{{ club.Edate }}</p>
                  <p>社团地址：{{ getAddressText(club.Address) }}</p>
                  <p>联系电话：{{ club.Phone }}</p>
                  <p>联系邮箱：{{ club.Mailbox }}</p>
                </div>
          </el-col>

        </el-row>


        <el-row :gutter="30" class="home-card-two mb15">
          <el-col :span="2">
          </el-col>
          <el-col :span="20">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="社团活动" name="first">列举社团相关活动列表</el-tab-pane>
    <el-tab-pane label="社团风采" name="second">角色管理</el-tab-pane>
    
    <el-tab-pane label="相关附件" name="third">
      <!-- <ul class="attachment-list"> -->
    <li class="attachment-item">

      <!-- <img class="attachment-icon" src="file-icon.png" alt="File Icon"> -->
      <span class="attachment-name">{{file.FName}}</span>
      <a href={{file.FileUrl}} download>下载</a>
    </li>
    <li class="attachment-item">
      <!-- <img class="attachment-icon" src="file-icon.png" alt="File Icon"> -->
      <span class="attachment-name">example_document2.docx</span>
      <a href="#" download>下载</a>
    </li>
    <li class="attachment-item">
      <!-- <img class="attachment-icon" src="file-icon.png" alt="File Icon"> -->
      <span class="attachment-name">example_image.jpg</span>
      <a href="#" download>下载</a>
    </li>
  <!-- </ul> -->
    </el-tab-pane>
  </el-tabs>
            <!-- <img :src="require('@/assets/clubAct.png')" > -->
          </el-col>
        </el-row>
        <el-row :gutter="15" class="home-card-three">
        </el-row>
      </div>
    </template>
    
    <script>
    import axios from 'axios';
    // import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
    // import { getToken } from './token';
import { ElMessage } from 'element-plus';
    export default {
      name: 'ClubDetail',
      
      data(){
        
        return{
          club:[],
          file:[],
          user:[],
          cid:1, //默认设置当前社团id为1
          uid:21311311,//默认设置用户id为21311311
          type:1, // 社团默认类别为1
          activeName: 'second',
          joinReason:'',
          dialogVisible: false,
          clubname:'',
          level:"校级",
          aim:"社团致力于balabalabala",
          establishDate:"2018-3-20",
          ClubPhone:"17725727668",
          ClubMail:"2541627593@qq.com",
          introduction:"社团成立于...,日常开展...活动",
          spotpic:[
          {
            src1:require('../components/测试图片.jpg'),
            caption:'黄山',
            score:3.5,
            comment:'五岳归来不看山，黄山归来不看岳',
          },
          {
            src1:require('../components/测试图片.jpg'),
            caption:'黄山',
            score:5,
            comment:'五岳归来不看山，黄山归来不看岳',
          },
          {
            src1:require('./测试图片.jpg'),
            caption:'黄山',
            score:5,
            comment:'五岳归来不看山，黄山归来不看岳',
          },
          {
            src1:require('./测试图片.jpg'),
            caption:'黄山',
            score:5,
            comment:'五岳归来不看山，黄山归来不看岳',
          }
        ],
        rules: {
          // name: [
          //   { required: true, message: '请输入活动名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ],
         
        },

        }
      },
      computed: {
    getTypeText() {
      return (type) => {
        switch (type) {
          case 1:
            return '思想政治类';
          case 2:
            return '学术科技类';

          case 3:
            return '体育竞技类'
          case 4:
            return '志愿公益类'
          case 5:
            return '文化艺术类'
        }
      };
    },
    getAddressText(){
      return (address) => {
        switch (address) {
          case 1:
            return '南校园';
          case 2:
            return '北校园';

          case 3:
            return '珠海校区'
          case 4:
            return '深圳校区'
          case 5:
            return '东校园'
          case 6:
            return '五校园'
        }
      };
    }
  },
      // 实例一旦创建就执行created里的函数
      created() {
    // this.$watch(()=>this.getSearchContent,this.searchHandler)
    // // 将uid传到Spot页面
    // let User = JSON.parse(sessionStorage.getItem('userID'))
    // if (User) {
    //   this.uid = User.user
    // }
    // var params = new URLSearchParams()
    // params.append('token', getToken())

    // 中后端得到社团详情数据
    // getClubDetail(params).then(response => {
    //   console.log(response.data)
    //   // 从后端获取当前club的数据
    //   this.club = response.data.data
    //   console.log(response.data);
    // })
    //     .catch(error => {
    //       console.log(error);
    //     })

  },
  mounted() {
    const params = new URLSearchParams();
    params.append('uid', 21311311);
    params.append('cid', 1);


    axios.get('http://localhost:8080/api/club/ClubDetail', { params })
      .then(response => {
        this.club = response.data.data.club; //社团相关信息
        this.file = response.data.data.file; //社团相关附件
        this.user = response.data.data.userinfo;
      })
      .catch(error => {
        console.error('Error fetching clubs:', error);
      });

     

  },
      methods:{
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        })
        },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    
        handleClick(tab, event) {
        console.log(tab, event);
      },
      handleSuccess(response) {
      // 文件上传成功的回调函数
      console.log('上传成功', response);
      },
    beforeUpload(file) {
      // 在上传之前的钩子函数，可以在这里做一些校验或者其他处理
      console.log('准备上传', file);
      return true; // 返回 true 表示继续上传，返回 false 将取消上传
    },
    // show（）是展示申请社团弹窗的判断函数
        show(){
        this.dialogVisible = true;
        },

        JoinClub(){
          const JoinData = new FormData();
      JoinData.append('cid',this.cid);
      JoinData.append('uid',this.uid)
      JoinData.append('file',this.joinFile)
      JoinData.append('reason',this.joinReason)
      //向后端post
      axios.post('api/club/submitForm', JoinData)
    .then(response => {
      ElMessage.success("申请加入社团成功！");

      console.log('Form submitted successfully:', response);

    })
    .catch(error => {
      console.error('Error submitting form:', error);
    });
        },
        
      
      },
      
      props: {
        msg: String
      }
    }
    </script>
    
    <style>
    .custom-dialog {
  font-family: Arial, sans-serif; /* 设置字体 */
}

.el-dialog__body {
  padding: 20px; /* 添加内边距 */
}

.demo-ruleForm .el-form-item__label {
  width: 100px; /* 设置标签宽度 */
}


    .tag-group {
  display: flex;
  justify-content: flex-start;
}

/* .clubname{

} */
.clubinfo{
  font-family: 楷体;
  text-align: left; /* 文本左对齐 */
  /* display: flex; */
  /* justify-content: flex-start; */
}

/* 按钮样式 */
.click_btn{
  display: flex;
  background-color: #2E8B57; /* 墨绿色 */
  text-align: left;
  /* height: 20px;
  width: 35px; */
    color: #fff; /* 文字颜色为白色 */
    border: none; /* 移除边框 */
    /* width: 45px;
    height: 15px; */
    border-radius: 5px; /* 设置圆角 */
    padding: 10px 20px; /* 设置内边距 */
    font-size: 15px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */

}

/* 按钮悬停样式 */
.click_btn:hover{
  background-color: #3CB371; 
}
/* 下载链接的样式 */
.download-link {
  color: rgba(0, 179, 255, 0.879); /* 设置链接文字颜色为蓝色 */
  text-decoration: underline; /* 添加下划线效果 */
}

.attachment-list {
      list-style: none;
      padding: 0;
    }
    .attachment-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #e0e0e0;
    }
    .attachment-item:last-child {
      border-bottom: none;
    }
    .attachment-icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
    .attachment-name {
      flex: 1;
    }
    
    </style>

